<!-- 查看讲师列表的页面 -->
<template>
    <div class="app-container">
        <!-- 讲师列表 -->
            <!--查询表单-->
        <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
        </el-form-item>
        <el-form-item>
            <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
            <el-option :value="1" label="高级讲师"/>
            <el-option :value="2" label="首席讲师"/>
            </el-select>
        </el-form-item>
        <el-form-item label="添加时间">
            <el-date-picker
            v-model="teacherQuery.begin"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            />
        </el-form-item>
        <el-form-item>
            <el-date-picker
            v-model="teacherQuery.end"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>
            <!-- 表格 -->
        <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="数据加载中"
        border
        fit
        highlight-current-row>
        <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="80" />
        <!-- 这个就使用了前端的判断 来通过数字来反应数字 -->
        <el-table-column label="头衔" width="80">
            <template slot-scope="scope">
            {{ scope.row.level===1?'高级讲师':'首席讲师' }}
            </template>
        </el-table-column>
        <el-table-column prop="intro" label="资历" />
        <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
        <el-table-column prop="sort" label="排序" width="60" />
        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <!-- 进行修改 -->
            <router-link :to="'/teacher/edit/'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>                                              <!--这个就能的到我们的这个的id  row 这一行的 然后id 就的到id-->
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <!-- 分页插件 -->
           <!-- 分页 -->
           <!-- page 当前页 limit 显示数  total总共-->
        <el-pagination
        :current-page="page"  
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
        />
        <!-- @current-change="getList" 分页的切换 每次切换都去查询一下 -->
    </div>
</template>

<script>
// 引入调用teacher.js的文件
import teacher from '@/api/edu/teacher.js'
export default {
    // 不用在写什么 new Vue 了 main方法帮我们封装了
    // 写核心代码
    // data:{
    //     list:null, // 查询之后接口返回集合
    //     page:1,// 当前页
    //     total:0, // 总记录数
    //     limit:10,// 每页显示记录数
    //     teacherQuery:{} // 条件封装对象

    // },
    // 定义你绑定的数据
    data(){
        return {
            list:[], // 查询之后接口返回集合
            page:1,// 当前页
            total:0, // 总记录数
            limit:10,// 每页显示记录数

            // 可以不定义我们的属性 会自动填充
            teacherQuery:{}, // 条件封装对象
            listLoading: false,
            
        }
    },
    // 页面渲染之前调用
    created(){
        // 调用
        this.getList()
    },
    // 调用teacher.js里面定义的方法
    methods:{
        // 讲师列表的方法(包括条件) 这个page = 1 表示我们默认为1 如果你修改了就是你修改了的
        getList(page = 1){
            this.page = page
            teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
                    .then(resp => {
                        // 接口返回的数据
                        // console.log(resp)
                        // 得到我们的数据
                        this.list = resp.data.rows
                        this.total = resp.data.total
                        console.log(this.list)
                        console.log(this.total)
                    })// 请求成功
                    .catch(error => {
                        console.log(error)
                    }) // 请求失败
        },
        // 这个就是清空的方法
        resetData() {
            // 清空我们的输出的条件
            this.teacherQuery = {}
            // 再重新查询一遍
            this.getList()
        },
        // 删除方法
        removeDataById(id){
            // 得到我们的id 了
            // alert(id)
                // debugger
            // console.log(memberId)
                this.$confirm('此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return teacher.deleteTeacherId(id)
                }).then(() => {
                    this.getList(this.page)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch((response) => { // 失败
                    if (response === 'cancel') {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    }
                })
        },
    }

}
</script>
